/**
在 React 中，组件作用域插槽（Scoped Slots）的概念并不是原生支持的特性，但我们可以通过一些技巧模拟类似的功能。作用域插槽的主要思想是允许子组件将数据传递给父组件，从而使父组件能够在其上下文中渲染子组件的内容。
  1. 定义作用域插槽的概念
  作用域插槽允许子组件提供数据，父组件可以使用这些数据来渲染自己的内容。这样可以增强组件的灵活性和复用性。

  2. 实现方式
  在 React 中，通常可以通过以下方式实现作用域插槽的效果：
  - 使用 render props：通过将一个函数作为 props 传递给子组件，子组件可以在其内部调用这个函数并传递数据。

  示例代码：
  jsx
  // 父组件
  const Parent = () => {
    const data = 'Hello from Parent!';

    return (
      <Child render={(childData) => (
        <div>
          <h1>{childData}</h1>
          <p>{data}</p>
        </div>
      )} />
    );
  };

  // 子组件
  const Child = ({ render }) => {
    const childData = 'Hello from Child!';
    return render(childData);
  };
  3. 使用 Children 作为函数
  另一种实现方式是使用  `children`  属性作为函数，这样可以直接在子组件中调用并传递数据。

  示例代码：
  jsx
  // 父组件
  const Parent = () => {
    return (
      <Child>
        {(childData) => (
          <div>
            <h1>{childData}</h1>
            <p>Additional content from Parent</p>
          </div>
        )}
      </Child>
    );
  };

  // 子组件
  const Child = ({ children }) => {
    const childData = 'Hello from Child!';
    return children(childData);
  };
  4. 注意事项
  - 灵活性：使用作用域插槽的方式可以使组件更具灵活性，父组件可以根据需要自定义渲染内容。
  - 可读性：虽然实现作用域插槽的方式增加了组件间的解耦性，但也可能使代码的可读性降低，因此需要合理使用。
  - 性能：使用 render props 或函数作为 children 可能会导致额外的渲染，因此在性能敏感的场景下需谨慎使用。

  5. 总结
  在 React 中，虽然没有原生的作用域插槽概念，但我们可以通过 render props 或者函数作为 children 的方式实现类似的功能。这种方法使得父组件能够灵活地使用子组件提供的数据，从而增强了组件的复用性和灵活性。
 */
import React, { Component } from 'react'
import TabControl from './TabControl'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      names: ["流行", "新款", "精选"],
      tabIndex: 0
    }
  }

  tabClick(index) {
    this.setState({
      tabIndex: index
    })
  }

  getTabItem(item) {
    if (item === "流行") {
      return <span>{item}</span>
    } else if (item === "新款") {
      return <button>{item}</button>
    } else {
      return <i>{item}</i>
    }
  }
  
  render() {
    const { names, tabIndex } = this.state
    
    return (
      <div>
        <TabControl
          names={names}
          tabIndex={tabIndex}
          itemType={(item) => this.getTabItem(item)}
          tabIndexClick={(index) => this.tabClick(index)}
        >
          <h3>{names[tabIndex]}</h3>
        </TabControl>
      </div>
    )
  }
}
